<template>
  <el-card>
    <el-breadcrumb class="bread">
        <el-breadcrumb-item v-for="(item, index) in crumbs" :key="index" :to="{ path: item.path }">
            {{ item.title }}
        </el-breadcrumb-item>
    </el-breadcrumb>
</el-card>
  <el-card>
    <el-table v-loading="loading" :data="projectsList" stripe style="width: 100%">
      <el-table-column prop="project_id" label="项目编号" />
      <el-table-column prop="project_name" label="项目别名" />
      <el-table-column prop="project_alias" label="项目位置" />
      <el-table-column label="云盒子编号">
        <template #default="scope">
          {{ maskString(scope.row.box_id, 4, 4) }}
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template #default="scope">
          {{ scope.row.is_online === 1 ? "在线" : scope.row.is_online === 2 ? "在线" : scope.row.is_online === 0 ? "离线" : "未知" }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template #default="scope">
          <el-button size="small" type="primary"
            @click="toBox(scope.row.box_id)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { projects } from '@/api';
const crumbs = ref([
    {
        "path": "/projects",
        "title": "项目列表"
    }
])

const loading = ref(true);
const router = useRouter();
const projectsList = ref([]);


// 获取设备列表
const getProjectsList = async () => {
  // 调用获取省份列表接口
  try {
    const res = await projects();
    if (res.status === 2000) {
      projectsList.value = res.data
    } else {
      ElMessage.error(res.message)
    }
  } catch (error) {

  } finally {
    loading.value = false;
  }

};
// 执行
getProjectsList();
// 查看详情点击事件
const toBox = (boxId) =>{
  window.sessionStorage.setItem("boxId", boxId)
  router.push({ path: '/projects/box', query: { boxId: boxId } })
};


const maskString = (str, start, end) => {
      const regex = new RegExp(`^(.{${start}})(.*)(.{${end}})$`);
      return str.replace(regex, (_, prefix, middle, suffix) => {
        const maskedMiddle = "*".repeat(3);
        return prefix + maskedMiddle + suffix;
      });
    }
</script>
<style></style>